<template>
  <view>
    <view class="main">
      <view class="main-banner">
        <image class="banner" src="@/static/community/banner.png"></image>
        <view class="mian-top">
          <view class="mian-top-left">
            <span>平台活动</span>
          </view>
          <view class="mian-top-right">
            <view class="circle" @tap="allActive"> 查看全部 </view>
          </view>
        </view></view
      >
      <!-- 活动 -->
      <view class="main-contain">
        <!-- 三个框 -->
        <view
          class="activity"
          v-for="item in show"
          :key="item.id"
          @tap="goactive"
        >
          <view class="left">
            <view class="green">
              {{ item.stastus }}
            </view>
          </view>
          <view class="center">
            {{ item.title }}
          </view>
          <view class="btn">
            <u-icon name="calendar" color="#ccc" size="40"></u-icon>
            <!-- <image
              class="image"
              src="../CustomStartPage/start-page.9.png"
              mode=""
            ></image> -->
            <span class="btn-text">报名时间：</span>
            <span class="btn-time">{{ item.time }}</span>
          </view>
        </view>
      </view>
    </view>
    <view class="contain">
      <view class="first" v-for="(item, index) in follow" :key="index">
        <!-- 话题 -->
        <view v-if="item.type == 1">
          <view class="contain-top">
            <image
              class="contain-top-image"
              src="./bg.png"
              mode=""
              @click="gotoinfo"
            ></image>
            <view class="right">
              <view class="top">
                <view class="name">
                  {{ item.name }}
                </view>
                <view class="bq">
                  {{ item.bq }}
                </view>
              </view>
              <view class="time">
                {{ item.time }}
              </view>
            </view>
          </view>
          <view class="text">
            <span>{{ item.smtit }}</span>
            <view class="bq">
              {{ item.status }}
            </view>
          </view>
          <view class="first-main">
            <view class="title" @click="xq">
              {{ item.neirong }}
            </view>
            <view class="img">
              <image
                class="image"
                :src="v"
                v-for="(v, i) in item.imgs"
                :key="i"
                mode=""
                @tap="showBigImg(v)"
              ></image>
            </view>
            <view class="button">
              <view class="left">
                <u-icon name="map-fill" color="#F4333C" size="28"></u-icon>
                <view>成都市武侯区环球...</view>
                <!-- <image class="left-img" src="./DZ.jpg" mode=""></image> -->
              </view>
              <view class="right">
                <view class="lj">
                  <image src="@/static/community/share.png" mode=""></image>
                  <!-- <u-icon name="share" color="#ccc" size="40"></u-icon> -->
                  <span>{{ item.fenxiang }}</span>
                </view>
                <view class="lj">
                  <image src="@/static/community/comment.png" mode=""></image>
                  <!-- <u-icon name="chat" color="#ccc" size="40"></u-icon> -->
                  <span>{{ item.yuedu }}</span>
                </view>
                <view class="lj">
                  <image src="@/static/community/collect.png" mode=""></image>
                  <!-- <u-icon name="star" color="#ccc" size="40"></u-icon> -->
                  <span>{{ item.like }}</span>
                </view>
                <view class="lj">
                  <image src="@/static/community/good.png" mode=""></image>
                  <!-- <u-icon name="thumb-up" color="#ccc" size="40"></u-icon> -->
                  <span>{{ item.good }}</span>
                </view>
              </view>
            </view>
          </view>
        </view>
        <!-- 广告 -->
        <view v-if="item.type == 0">
          <view class="contain-top">
            <image class="contain-top-image" src="./bg.png" mode=""></image>
            <view class="right">
              <view class="top">
                <view class="name">
                  {{ item.name }}
                </view>
              </view>
              <view class="time">
                {{ item.from }}
              </view>
            </view>
          </view>
          <view @tap="goactive">
            <view class="text">
              <span>{{ item.smtit }}</span>
            </view>
            <view class="activeImg">
              <image class="image" :src="item.img" @tap="showBigImg(v)"></image>
            </view> </view
        ></view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: "community-follow",
  data() {
    return {
      show: [
        {
          id: 1,
          title: "参加海豚瑜伽挑战赛1,唤醒本色,本就出色.",
          time: "2022-09-12 12:00~2022-09-18 12:00",
          stastus: "活动进行中",
        },
        {
          id: 2,
          title: "参加海豚瑜伽挑战赛2,唤醒本色,本就出色.",
          time: "2022-09-121 12:00~2022-09-18 12:00",
          stastus: "活动进行中",
        },
        {
          id: 3,
          title: "参加海豚瑜伽挑战赛3,唤醒本色,本就出色.",
          time: "2022-09-12 212:00~2022-09-18 12:00",
          stastus: "活动进行中",
        },
      ],
      follow: [
        {
          type: 1,
          id: 1,
          name: "C***着",
          bq: "运动员",
          time: "2022-09-12 12:00",
          smtit: "跑步人的一天",
          status: "审核中",
          neirong:
            "SDKsad脑壳is阿里你哦23离开你搜电视里，啊落地哦1 看到你无论是拉可能点哦强迫我觉得前五名的请问你都去我看驱蚊器沃恩请我们请我其ID我红藕no彼迪1312偶就都爱的亲我只你",
          imgs: [
            require("./bg.png"),
            require("./bg.png"),
            require("./bg.png"),
            require("./bg.png"),
            require("./bg.png"),
            require("./bg.png"),
          ],
        },
        {
          type: 0,
          id: 1,
          name: "C***着",
          bq: "运动员",
          // time: "2022-09-12 12:00",
          from: "o2o官方账号",
          smtit: "跑步人的一天",
          status: "审核中",
          neirong:
            "SDKsad脑壳is阿里你哦23离开你搜电视里，啊落地哦1 看到你无论是拉可能点哦强迫我觉得前五名的请问你都去我看驱蚊器沃恩请我们请我其ID我红藕no彼迪1312偶就都爱的亲我只你",
          img: require("./bg.png"),
        },
        {
          type: 1,
          id: 2,
          name: "A***着",
          bq: "明星",
          time: "2023-09-12 12:00",
          smtit: "跑步人的二天",
          status: "审核中",
          neirong:
            "SDKsad脑壳is阿里你哦23离开你搜电视里，啊落地哦1 看到你无论是拉可能点哦强迫我觉得前五名的请问你都去我看驱蚊器沃恩请我们请我其ID我红藕no彼迪1312偶就都爱的亲我只你",
          imgs: [
            require("./bg.png"),
            require("./bg.png"),
            require("./bg.png"),
            require("./bg.png"),
            require("./bg.png"),
            require("./bg.png"),
          ],
        },
      ],
    };
  },
  methods: {
    xq() {
      uni.navigateTo({
        url: "/pages/community/topiclist/topiclist",
      });
    },
    //点击放大图片
    showBigImg(img) {
      let arr = [];
      arr.push(img);
      console.log(arr, "图片的地址");
      uni.previewImage({
        current: 0,
        urls: arr, //必须是网址路径，否则加载不出来，如：http：或https：
      });
    },
    goactive() {
      uni.navigateTo({
        url: "/pages/community/active/activeInfo",
      });
    },
    allActive() {
      uni.navigateTo({
        url: "/pages/community/active/allActive",
      });
    },
    gotoinfo() {
      console.log(123);
      uni.navigateTo({
        url: "/pages/community/personalCenter/personalCenter",
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.main {
  // border: 1px solid #FFFFFF;
  width: 720rpx;
  // height: 500rpx;
  border-radius: 20rpx 20rpx 0 0;
  overflow: hidden;
  background-color: #ffffff;
  margin: 20rpx;
  .main-banner {
    position: relative;
    .banner {
      width: 100%;
      height: 108rpx;
    }
    .mian-top {
      position: absolute;
      top: 0;
      width: 100%;
      height: 108rpx;
      // background-color: #e4e3f5;
      overflow: hidden;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .mian-top-left {
        margin-left: 20rpx;
        width: 150rpx;
        height: 100%;
        // border: 1xp solid red;
        line-height: 108rpx;
        font-weight: 400;
        font-size: 16px;
      }
      .mian-top-right {
        margin-right: 20rpx;
        width: 142rpx;
        height: 48rpx;
        border: 1px solid #ffffff;
        text-align: center;
        background-color: #ffffff;
        border-radius: 24rpx;
        font-size: 10px;
        line-height: 40rpx;
      }
    }
  }
  .main-contain {
    width: auto;

    // border: 1rpx solid red;
    // padding-left: 10rpx;
    margin-bottom: 10rpx;
    margin: 10rpx 30rpx;
    .activity {
      width: 100%;
      height: 180rpx;
      display: flex;
      justify-content: center;
      align-items: flex-start;
      flex-wrap: wrap;
      border-bottom: 1px solid #c0c0c0;
      .left {
        width: 100%;
        height: 40rpx;
        display: flex;
        justify-content: flex-end;
        padding-top: 10rpx;
        .green {
          width: 150rpx;
          height: 40rpx;
          line-height: 40rpx;
          // border: 1rpx solid #67c9068e;
          text-align: center;
          border-radius: 20rpx 0 0 0;
          background-color: #dcf8ee;
          font-size: 12px;
          color: #34b572;
        }
      }
      .center {
        width: 100%;
        height: 50rpx;
        line-height: 50rpx;
        // background-color: #aaffff;
      }
      .btn {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        background-color: #ffffff;
        .image {
          width: 32rpx;
          height: 28rpx;
        }
        .btn-text {
          font-size: 16rpx;
          color: #7f7f7f;
          font-size: 12px;
        }
        .btn-time {
          color: #333333;
          font-size: 12px;
        }
      }
    }
  }
}
.contain {
  width: 750rpx;
  // height: 1210rpx;
  background-color: #ffffff;
  padding: 0 20rpx;
  .first {
    width: 100%;
    // height: 600rpx;
    // border: 1px solid red;
    padding: 20rpx;
    margin-bottom: 40rpx;
    .contain-top {
      width: 100%;
      height: 150rpx;
      // border: 1px solid red;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      .contain-top-image {
        width: 100rpx;
        height: 100rpx;
        border-radius: 50%;
        margin-right: 20rpx;
      }
      .right {
        width: 300rpx;
        height: 100%;
        // border: 1px solid red;
        display: flex;
        justify-content: flex-start;
        align-items: flex-start;
        flex-wrap: wrap;
        .top {
          width: 100%;
          height: 75rpx;
          // border: 1px solid red;
          display: flex;
          justify-content: flex-start;
          align-items: flex-start;
          .name {
            margin-right: 20rpx;
            font-size: 30rpx;
          }
          .bq {
            border-radius: 10rpx;
            height: 40rpx;
            // background-color: #15f6a4;
            font-size: 16rpx;
            line-height: 20rpx;
            color: #f4333c;
            padding: 10rpx;
          }
        }
        .time {
          width: 100%;
          height: 75rpx;
          // border: 1px solid red;
          &:hover {
            color: #cacaca;
          }
        }
      }
    }
    .text {
      font-size: 30rpx;
      font-weight: 400;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      height: 60rpx;
      // border: 1px solid red;
      margin-bottom: 10rpx;
      .bq {
        font-size: 10rpx;
        background-color: #d0d0d0;
        color: #fff;
        padding: 10rpx 20rpx;
        margin-left: 20rpx;
      }
    }
    .first-main {
      width: 100%;
      // height: 200rpx;
      // border: 1px solid red;

      .title {
        text-overflow: -o-ellipsis-lastline;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        line-clamp: 2;
        -webkit-box-orient: vertical;
        margin-bottom: 20rpx;
      }
      .img {
        width: 100%;
        display: flex;
        margin: 0 10rpx;
        flex-wrap: wrap;
        .image {
          width: 30%;
          height: 150rpx;
          margin: 0 8rpx;
          border-radius: 10rpx;
          overflow: hidden;
        }
      }

      .button {
        width: 100%;
        height: 60rpx;
        // border: 1rpx solid red;
        display: flex;
        align-items: center;
        justify-content: space-between;
        .left {
          display: flex;
          align-items: center;
          color: #f4333c;
          .left-img {
            width: 300rpx;
            height: 40rpx;
          }
        }
        .right {
          display: flex;
          align-items: center;
          justify-content: space-between;
          width: 300rpx;
          height: 60rpx;
          .lj {
            color: #9d9d9d;
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            // justify-content: space-around;
            margin-right: 5rpx;
            image {
              width: 30rpx;
              height: 30rpx;
              margin-right: 10rpx;
            }
          }
        }
        // .right {
        //   display: flex;
        //   align-items: center;
        //   justify-content: space-between;
        //   width: 400rpx;
        //   height: 60rpx;
        //   // border: 1px solid red;
        //   .lj {
        //     width: 100%;
        //     height: 100%;
        //     // border: 1px solid blue;
        //     display: flex;
        //     align-items: center;
        //     justify-content: space-around;
        //     margin-right: 5rpx;
        //     image {
        //       width: 40rpx;
        //       height: 40rpx;
        //       // border: 1px solid #FF3C2A;
        //     }
        //   }
        // }
      }
    }
  }
}
.activeImg {
  width: 100%;
  .image {
    width: 100%;
    height: 280rpx;
    margin: 0 auto;
    border-radius: 10rpx;
    overflow: hidden;
  }
}
</style>
